<template>
  <div class="chart">
    <div ref="chartRef" v-if="hasData"></div>
    <a-empty v-else></a-empty>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import ResumeService from '@/api/resume';
// import { echarts } from '@/utils/echarts';
// import { EChartsOption } from 'echarts/types/dist/shared';

interface Resp {
  construction: number;
  education: number;
  engineer: number;
  finance: number;
  internet: number;
  legal: number;
  manager: number;
  medical: number;
  operate: number;
  other: number;
  procurement: number;
  product: number;
}

const chartData = ref<
  {
    value: number;
    name: string;
  }[]
>([]);
const chartRef = ref<HTMLDivElement>();
// let ei: echarts.ECharts;
const hasData = ref(true);

function chartResize() {
  // ei.resize();
}

async function renderChart() {
  // const indicator = chartData.value.map(t => {
  //   return {
  //     name: t.name,
  //     max: 10,
  //   };
  // });
  // const values = chartData.value.map(t => t.value)!;

  // const option: EChartsOption = {
  //   title: {
  //     show: false,
  //   },
  //   legend: {
  //     show: false,
  //   },
  //   color: ['#6285FF'],
  //   radar: {
  //     indicator,
  //     splitLine: {
  //       lineStyle: {
  //         type: 'dashed',
  //         dashOffset: 5,
  //       },
  //     },
  //     splitArea: {
  //       areaStyle: {
  //         color: ['#fff'],
  //       },
  //     },
  //     axisLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         dashOffset: 5,
  //       },
  //     },
  //     // center: ['44%', '50%'],
  //   },
  //   series: {
  //     type: 'radar',
  //     symbol: 'none',
  //     lineStyle: {
  //       color: '#6285FF',
  //       width: 1,
  //     },

  //     areaStyle: {
  //       color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
  //         { offset: 0, color: '#6285FF' },
  //         { offset: 1, color: 'rgba(2, 77, 255, 0.07)' },
  //       ]),
  //     },
  //     data: [{ value: values }],
  //   },
  // };

  // ei.setOption(option, true);
}

async function fetchPageData() {
  const resp = await ResumeService.selectResumePredictedIndustry<Resp>({
    seekerResumeTypeEnum: 'online',
  });
  if (resp.code === 200) {
    const { data } = resp;
    if (!data) {
      hasData.value = false;
      return;
    }

    chartData.value = [
      {
        value: data?.construction || 0,
        name: '建筑/房地产',
      },
      {
        value: data?.legal || 0,
        name: '咨询/法律/公务员',
      },
      {
        value: data?.medical || 0,
        name: '生物/制药/医疗/护理',
      },
      {
        value: data?.education || 0,
        name: '教育/翻译/服务业',
      },
      {
        value: data?.other || 0,
        name: '其他',
      },
      {
        value: data?.engineer || 0,
        name: '工程师',
      },
      {
        value: data?.operate || 0,
        name: '运营/客服/销售/市场',
      },
      {
        value: data?.manager || 0,
        name: '人事/行政/高级管理',
      },
      {
        value: data?.procurement || 0,
        name: '生产/采购/物流',
      },
      {
        value: data?.internet || 0,
        name: '互联网',
      },
      {
        value: data?.product || 0,
        name: '产品',
      },
      {
        value: data?.finance || 0,
        name: '金融',
      },
    ];

    renderChart();
  }
}

onMounted(() => {
  fetchPageData();
  // ei = echarts.init(chartRef.value!);
  // window.addEventListener('resize', chartResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', chartResize);
});
</script>

<style scoped lang="less">
.chart {
  position: absolute;
  left: 0;
  top: 44px;
  right: 0;
  bottom: 0;
  div {
    height: 100%;
  }
}
</style>
